<template>
  <div class="main-container">
    <CategoryChart />
    <CircularChart />
    <LocationChart />
    <AssetStatusChart />
    <!--<CategoryChart />
    <CircularChart /> -->
  </div>
</template>

<script setup lang="ts">
import CategoryChart from '@/components/statis/category.vue';
import CircularChart from '@/components/statis/circular.vue';
import LocationChart from '@/components/statis/locationpropChart.vue';
import AssetStatusChart from '@/components/statis/assetStatusChart.vue';
import {h, onMounted} from 'vue'
import { ElNotification } from 'element-plus'
import { getInventoryWarning } from '@/api/statistic.js'
import { getDetailBySelf } from '@/api/InventoryCheckDetail.js'

const showInventoryWarning = async () => {
  try {
    const { data } = await getInventoryWarning()
    if (data && data.length > 0) {
      // 构建通知消息内容
      const message = h('div', null, [
        h('div', { style: 'font-weight: bold; margin-bottom: 10px;' }, '以下耗材库存不足:'),
        h('ul', { style: 'width: 260px; padding: 0;' },
            data.map(item =>
                h('li', null,
                    `${item.materialName} (${item.categoryName}) - ${item.warehouseName}: 当前数量 ${item.quantity} / 预警数量 ${item.lockQuantity}`
                )
            )
        )
      ])

      ElNotification({
        title: '耗材库存预警提醒',
        message,
        duration: 0,
        type: 'error',
        position: 'top-right'
      })
    }
  } catch (error) {
    console.error('获取库存预警失败:', error)
  }
}
// 资产盘点异常消息
const showAssetRecord = async () => {
  try {
    const { data } = await getDetailBySelf()
    if (data && data.length > 0) {
      // 构建通知消息内容
      
      const message = h('div', null, [
        h('div', { style: 'font-weight: bold; margin-bottom: 10px;' }, '以下资产异常不足:'),
        h('ul', { style: 'width: 260px; padding: 0;' },
            data.map(item =>
                h('li', null,
                    `${item.name} (${item.categoryName}) - ${item.locationName}: 差异说明:${item.discrepancyNote?item.discrepancyNote: '无差异说明'}`
                )
            )
        )
      ])

      ElNotification({
        title: '盘点资产异常预警提醒',
        message,
        duration: 0,
        type: 'error',
        position: 'top-right'
      })
    }
  } catch (error) {
    console.error('获取盘点资产异常预警失败:', error)
  }
}
onMounted(() => {
  showInventoryWarning();
  // showAssetRecord();
})

</script>

<style scoped>
.main-container {
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
</style>